<template>
	<div class="sw_section_container">
		<div class="sw_query_form">
			<el-form size="small" inline v-if="$isHasAuth(topFrames)">
				<template v-if="$isHasAuth(topButton)">
					<el-form-item>
						<el-date-picker v-model="timeRanges" v-bind="dateConfig"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="queryTableData">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-refresh-left" @click="handleResetQuery">重置</el-button>
					</el-form-item>
				</template>
				<el-form-item v-hasPermi="'f16602d7461a4ec4a31bfc7cbceed933'">
					<el-button type="warning" icon="el-icon-upload2" @click="handleExportData">导出</el-button>
				</el-form-item>
			</el-form>
			<el-radio-group v-model="dataMode" size="small">
				<el-radio-button label="1">列表</el-radio-button>
				<el-radio-button label="2">图表</el-radio-button>
			</el-radio-group>
		</div>
		<div class="sw_table_container" v-if="dataMode === '1'">
			<el-table size="medium" ref="table" :data="tableData" height="100%" class="index_table_wrapper" :row-class-name="handleRowClassName">
				<el-table-column label="测量技术分布" prop="name" min-width="150"></el-table-column>
				<el-table-column label="课题数" prop="topicNum" min-width="100"></el-table-column>
				<el-table-column label="机时数" prop="expeNum" min-width="100"></el-table-column>
				<el-table-column label="比例" prop="expeRatio" min-width="100"></el-table-column>
			</el-table>
		</div>
		<template v-else-if="dataMode === '2'">
			<measure-chart :data="tableData"></measure-chart>
		</template>
	</div>
</template>

<script>
import mixins from '../mixins';
import measureChart from './echart';
import { exportDataToExcel } from '@/utils/exceljs';
import { queryMeasureList } from '@/api/business/stat';
export default {
	mixins: [mixins],
	components: { measureChart },
	data() {
		return {
			dataMode: '1'
		};
	},
	computed: {
		topButton() {
			return ['010e2413f0fe40d5a8f9700d1ed1b281'];
		},
		topFrames() {
			return [...this.topButton, 'f16602d7461a4ec4a31bfc7cbceed933'];
		}
	},
	watch: {
		timeRanges(data) {
			if (!data) {
				this.$delete(this.queryData, 'startTime');
				this.$delete(this.queryData, 'endTime');
			} else {
				this.$set(this.queryData, 'startTime', data[0]);
				this.$set(this.queryData, 'endTime', data[1]);
			}
		}
	},
	mounted() {
		this.handleResetQuery();
	},
	methods: {
		//获取表格数据
		async getTableData() {
			let params = { ...this.queryData };
			let result = await queryMeasureList(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				this.tableData = this.formatMeasureData(datas);
			}
		},

		queryTableData() {
			this.loading = true;
			this.getTableData();
		},
		
		//重置查询
		handleResetQuery() {
			this.queryData = {};
			this.timeRanges = null;
			this.$nextTick(() => {
				this.queryTableData();
			});
		},

		//获取列表总数
		getListTotal(arr) {
			let total = 0;
			arr.forEach((n) => {
				total += Number(n.scount);
			});
			return total;
		},

		//格式化研究领域数据
		formatMeasureData(data) {
			let totalHour = this.getListTotal(data.expe);
			let expeNames = data.expe.map((n) => n.name);
			let topicNames = data.topic.map((n) => n.name);
			let measureNames = Array.from(new Set([...expeNames, ...topicNames]));
			let measureArr = measureNames.map((item) => {
				let expeInfo = data.expe.find((n) => n.name === item);
				let topicInfo = data.topic.find((n) => n.name === item);
				let measureData = {
					name: item,
					expeNum: !expeInfo ? 0 : Number(expeInfo.scount),
					topicNum: !topicInfo ? 0 : Number(topicInfo.scount)
				};
				if (!measureData.expeNum) {
					measureData['expeRatio'] = '0%';
				} else {
					measureData['expeRatio'] = Math.round((measureData.expeNum / totalHour) * 10000) / 100 + '%';
				}
				return measureData;
			});
			measureArr.push({ name: '合计', expeNum: totalHour, topicNum: this.getListTotal(data.topic) });
			return [...measureArr];
		},

		handleRowClassName({ row, rowIndex }) {
			if (this.tableData.length === rowIndex + 1) {
				return 'summation_row_class';
			}
		},

		exportConfig() {
			let config = { data: this.tableData };
			let columns = this.$refs['table'].columns;
			config['headers'] = [columns.map((n) => n.label)];
			config['fields'] = columns.map((n) => n.property);
			config['columnsWidth'] = columns.map((n) => n.realWidth / 9);
			config['merges'] = columns.map((n, i) => {
				return { row: n.level - 1, col: i, rowspan: n.rowSpan, colspan: n.colSpan };
			});
			return config;
		},

		//导出数据
		handleExportData() {
			let config = this.exportConfig();
			config['sheetName'] = '测量技术';
			config['attrs'] = [
				{
					rowStart: 0,
					rowEnd: 0,
					colStart: 0,
					colEnd: config.fields.length - 1,
					attr: {
						height: 24,
						font: { bold: true },
						fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: '99CCFF' } }
					}
				},
				{
					rowStart: config.data.length,
					rowEnd: config.data.length,
					colStart: 0,
					colEnd: config.fields.length - 1,
					attr: {
						height: 24,
						font: { bold: true },
						fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'C0C4CC' } }
					}
				},
				{
					rowStart: 0,
					rowEnd: config.data.length,
					colStart: 0,
					colEnd: config.fields.length - 1,
					attr: {
						height: 20,
						alignment: { vertical: 'middle' },
						border: { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } }
					}
				},
				{
					rowStart: 0,
					rowEnd: config.data.length,
					colStart: 1,
					colEnd: config.fields.length - 1,
					attr: {
						alignment: { vertical: 'middle', horizontal: 'center' }
					}
				}
			];
			exportDataToExcel(config, '测量技术.xls');
		}
	}
};
</script>

<style lang="scss" scoped>
.index_table_wrapper::v-deep {
	.summation_row_class {
		background-color: #f5f7fa;
	}
}
</style>
